<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <script>
        // 点击.box alert相应下标
        var box = document.getElementsByClassName('box');
        // for (var a = 0; a < box.length; a++) {
        //     box[a].index = a;
        //     box[a].onclick = function() {
        //         alert(this.index);
        //     }
        // }
        /* 
        1:let拥有块级作用域
        2：let不存在变量的提前声明
        3：let不能重复声明
        4：let虽然是块级作用域但是不影响作用域链
        */
        for (let i = 0; i < box.length; i++) {
            box[i].onclick = function() {
                alert[i]
            }
        }



        {
            let girl = "班长";
        }
        // console.log(girl);
        // console.log(yuzong);
        let yuzong = "没我帅";
        //let yuzong ="比我帅";


        {
            let girl = "班长";

            function fn() {
                console.log(girl);
            }
            fn()
        }





        //点击.box alert相应下标
        var box = document.getElementsByClassName('box');
        // for (var a = 0; a < box.length; a++) {
        //     box[a].index = a;
        //     box[a].onclick = function() {
        //         alert(this.index);
        //     }
        // }

        //1:let拥有块级作用域
        //2:let不存在变量提前声明
        //3：let不能重复声明
        //4：let虽然是块级作用域但是不影响作用域链
        for (let i = 0; i < box.length; i++) {
            box[i].onclick = function() {
                alert(i);
            }
        }

        {
            let girl = '班长';

            function fn() {
                console.log(girl);
            }
            fn();
        }




        //点击.box alert相应下标
        var box = document.getElementsByClassName('box');
        // for (var a = 0; a < box.length; a++) {
        //     box[a].index = a;
        //     box[a].onclick = function() {
        //         alert(this.length);
        //     }
        // }

        //1:let拥有块级作用域
        //2:let不存在变量提前声明
        //3：let不能重复声明
        //4：let虽然是块级作用域但不影响作用域链
        for (let i = 0; i < box.length; i++) {
            box[i].onclick = function() {
                alert(i);
            }
        }

        {
            let girl = "班长";
        }
        // console.log(girl);
        // console.log(yuzong);
        let yuzong = "没我帅";
        // let yuzong="比我帅";

        {
            let girl = "班长";

            function fn() {
                console.log(girl);
            }
            fn()
        }
    </script>
</body>

</html>